<template>
  <div class="box-switch">
    <img src="@/assets/images/img-icon14.svg"/>箱体开关开启
    <img src="@/assets/images/img-icon13.svg"/>箱体开关关闭
  </div>
  <div style="position: absolute; top: 50px; left: 10px">
    北 <img src="@/assets/images/img-icon40.svg" width="30" style="vertical-align: middle">
  </div>
  <div class="lamp-wrap scrollBar"
       :class="currentMenu == 3 ? 'house-all' : ''"
       :style="setStyle()">
    <template v-for="(item,index) in lampData">
      <div class="house" v-if="item.towername"
           :style="{'margin-top': item.towerArea == 2 && item.towerNumber == 5 ? '-500px' :''}">
        <template v-for="(opt,i) in item.lightList">
          <div class="lamp" :class="{ 'lamp-empty': opt.lightType == 5 || opt.lightType == 3 }, 'house-lamp'+opt.lightnameUi"
               @click.stop="menuLampHandle($event,opt,item)"
               @mouseleave.stop="showMenu = false"
               @mouseover="switchHandle($event,opt)">
            <template v-if="opt.lightType == 1">
              <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon36.svg"/>
              <img v-else src="@/assets/images/img-icon35.svg"/>
            </template>
            <img v-else-if="opt.lightType == 2" src="@/assets/images/img-icon33.svg"/>
            <img v-else-if="opt.lightType == 4" src="@/assets/images/img-icon34.svg"/>
            <template v-if="opt.lightType == 6">
              <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon7.svg"/>
              <img v-else src="@/assets/images/img-icon43.svg"/>
            </template>
            <div class="txt">{{ opt.lightnameFact }}</div>
          </div>
        </template>
        <div class="lamp-area" v-for="opt in item.scene">
          <div class="handle-btn">
            <div :style="{'color': opt.status == 0 ? '#fff' : '#366',
              'background': opt.status == 0 ? '#3CBDFF' : ''}">现场
            </div>
            <div :class="{'on':opt.status == 1 && item.manual == 0}" @click="lighthouseHandle(item,0, 'house')">自动</div>
            <div :class="{'on':opt.status == 1 && item.manual == 1}" @click="lighthouseHandle(item,1, 'house')">远控</div>
          </div>
          <div v-if="userInfo.role == 0" class="add-icon" @click="addLampHandle(item,'house')"></div>
          <div v-if="userInfo.role == 0 || userInfo.role == 1 || userInfo.role == 2" class="edit-icon" @click.stop="menuHandle({}, item,  'house')"></div>
          <div v-if="item.towerId >= 14 && userInfo.role == 0" class="del-house" @click.stop="delHandle(item)"></div>
          <div v-if="userInfo.role == 0" class="del-light" style="margin-right: 10px" @click.stop="delLampHandle(item)"></div>
          <div class="electric-icon" @click.stop="onsiteHandle(item,'house')"></div>
        </div>
      </div>
      <div v-else class="bridge" :class=" item.brigeArea == 1 ? 'bridge-one' : 'bridge-two' ">
        <div class="lamp" :class="'lamp'+index, 'bridge-lamp'+opt.lightnameUi, { 'lamp-empty': opt.lightType == 5 || opt.lightType == 3 }"
             @click.stop="menuLampHandle($event,opt,item)"
             @mouseleave.stop="showMenu = false"
             @mouseover="switchHandle($event,opt)"
             v-for="(opt,i) in item.lightList">
          <template v-if="opt.lightType == 1">
            <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon36.svg"/>
            <img v-else src="@/assets/images/img-icon35.svg"/>
          </template>
          <img v-else-if="opt.lightType == 2" src="@/assets/images/img-icon33.svg"/>
          <img v-else-if="opt.lightType == 4" src="@/assets/images/img-icon34.svg"/>
          <template v-if="opt.lightType == 6">
            <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon7.svg"/>
            <img v-else src="@/assets/images/img-icon43.svg"/>
          </template>
          <div class="txt">{{ opt.lightnameFact }}</div>
        </div>
        <div class="lamp-area">
          <template v-for="opt in item.scene">
            <div class="handle-btn">
              <div :style="{'color': opt.status == 0 ? '#fff' : '#366',
              'background': opt.status == 0 ? '#3CBDFF' : ''}">现场
              </div>
              <div :class="{'on':opt.status == 1 && item.manual == 0}"
                   @click="lighthouseHandle(item,0, 'bridge')">自动
              </div>
              <div :class="{'on':opt.status == 1 && item.manual == 1}"
                   @click="lighthouseHandle(item,1, 'bridge')">远控
              </div>
            </div>
          </template>
          <div v-if="userInfo.role == 0" class="add-icon" @click="addLampHandle(item,'bridge')"></div>
          <div v-if="userInfo.role == 0 || userInfo.role == 1 || userInfo.role == 2" class="edit-icon" @click.stop="menuHandle({}, item, 'bridge')"></div>
          <div v-if="userInfo.role == 0" class="del-light" @click.stop="delLampHandle(item)"></div>
          <div class="electric-icon" @click.stop="onsiteHandle(item,'bridge')"></div>
        </div>
      </div>
    </template>
    <div class="sure-btn add-btn" :style="{ 'margin-top' : currentMenu == 3 ? '100px' : '' }"
         v-if="userInfo.role == 0" @click="addHouseHandle">添加
    </div>

    <div class="lamp-btns">
      <!--   只显示箱体 type = 2   type:1(现场)  -->
      <div class="item" :class="{ 'lamp-bridge': item.type == 2 }" v-for="item in lampName">
        <div class="box">
          <!--  箱体  -->
          <template v-for="(opt,i) in item.switchList">
            <template v-if="opt.type == 2">
              <div class="txt" v-if="i == 0">{{ opt.switchnameFact }}</div>
              <div class="img">
                <img v-if="opt.status == 1" src="@/assets/images/img-icon13.svg" width="21"/>
                <img v-else src="@/assets/images/img-icon14.svg" width="21"/>
              </div>
            </template>
          </template>
        </div>
        <div class="net">
          <!--  网关  -->
          <template v-if="Array.isArray(item.gatewaylist)">
            <span class="lamp-name">{{ item.name }}</span>
            <template v-for="opt in item.gatewaylist">
              <span class="status" :class="{ 'online': opt.gatewayOnline == 1 }">
                <template v-if="opt.gatewayOnline == 1">在线</template>
                <template v-else>离线</template>
              </span>
            </template>
          </template>
          <template v-else>
            <span class="lamp-name">{{ item.name }}</span>
            <span class="status" :class="{ 'online': item.gatewaylist.gatewayOnline == 1 }">
              <template v-if="item.gatewaylist.gatewayOnline == 1">在线</template>
              <template v-else>离线</template>
            </span>
          </template>
        </div>
      </div>
    </div>

    <div class="lamp-area-name">
      <template v-if="currentMenu == 1">一区</template>
      <template v-else-if="currentMenu == 2">二区</template>
      <template v-else-if="currentMenu == 3">散货码头</template>
    </div>
  </div>

  <!-- 浮窗 -->
  <div class="lamp-menu" v-show="showMenu" style="width: 130px"
       :style="{ left: this.clientX, top: this.clientY }">
    开关映射：<span>{{ currLamp.lightname }}</span>
  </div>

  <div class="lamp-menu" v-show="showLampMenu" style="width: 450px"
       :style="{ left: this.clientMenuX, top: this.clientMenuY }">
    <edit-lamp-new ref="editLampNew"
                   :currLamp="currMenuLamp"
                   :currMenuLampItem="currMenuLampItem"
                   :mappingData="mappingDataBridge"
                   @closeHandle="showLampMenu = false"
                   @saveOk="init"></edit-lamp-new>
  </div>
  <!-- 弹窗 -->
  <edit-lamp ref="editLamp" :mappingData="mappingData" @saveOk="init"></edit-lamp>
  <add-lamp ref="addLamp" @saveOk="init"></add-lamp>
  <add-house ref="addHouse" @saveOk="init"></add-house>
  <del-lamp ref="delLamp" @delHandle="init"></del-lamp>
  <edit-gateway ref="editGateway" :gatewaylist="currGatewaylist" @saveOk="init"></edit-gateway>
  <del-light ref="delLight" :lightList="currentLightList" @saveOk="init"></del-light>

  <el-dialog
      v-model="switchLight.diaVisible"
      title="提示"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px"
      @close="switchLight.diaVisible = false"
  >
    <div style="text-align: center; margin-top: 20px">
      该操作会使本建筑的控制模式转换，请确认是否进行此操作？
    </div>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="switchLight.diaVisible = false" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="onsite.diaVisible"
      title="巡检电流"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px"
      @close="onsite.diaVisible = false"
  >
    <div style="text-align: center; margin-top: 20px">
      设置巡检电流值: <el-input-number v-model="onsite.standardElectric" precision="2" step="1" min="0"  />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitFormOnsite" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="onsite.diaVisible = false" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>

</template>

<script>
import {mapGetters} from "vuex";
import {
  BrigeZongLan, judgeLightOnline, refreshGatewayData, setStandardElectric, TowerZongLan,
  updateBrigeManual, updateTowerManual
} from "../../router/api.js";
import EditLamp from "./editLamp.vue";
import AddLamp from "./addLamp.vue";
import AddHouse from "./addHouse.vue";
import EditLampNew from "./editLampNew.vue";
import DelLamp from "./delLamp.vue";
import EditGateway from "./editGateway.vue";
import DelLight from "./delLight.vue";

export default {
  name: "index",
  components: {DelLight, EditGateway, DelLamp, EditLampNew, AddHouse, AddLamp, EditLamp},
  computed: {
    ...mapGetters(['currentMenu', 'userInfo', 'refreshFlag'])
  },
  data() {
    return {
      lampData: [],
      lampName: [],
      showMenu: false,
      clientX: 0,
      clientY: 0,
      bodyWidth: 1200,
      bodyHeight: 960,
      mappingList: {},
      mappingData: [],
      timer: null,
      currLamp: {},
      fetchingFlag: true,
      onSiteList: {},
      flagScene: false,
      showLampMenu: false,
      currGatewaylist: [],
      clientMenuX: 0,
      clientMenuY: 0,
      currMenuLamp: {},
      currMenuLampItem: {},
      currentLightList: [],
      mappingDataBridge: [],
      switchLight: {
        item: {},
        type: 1,
        str: 'house',
        diaVisible: false
      },
      onsite: {
        standardElectric: 0,
        diaVisible: false
      },
      currOnsite: {}
    }
  },
  watch: {
    'currentMenu': {
      deep: true,
      immediate: true,
      handler(n) {
        this.init();

        clearInterval(this.timer);

        this.timer = setInterval(() => {
          if (this.fetchingFlag) {
            this.getLampData();
          }
        }, 1000 * 5)
      }
    },
    'refreshFlag': {
      deep: true,
      handler(n) {
        if (n) {
          refreshGatewayData().then(res => {
            if (res.data.code == 200) {
              this.init()

              this.$store.commit('SET_WAIT', true)
            }
          });
        }
      }
    }
  },
  created() {
    this.bodyWidth = document.documentElement.clientWidth;
    this.bodyHeight = document.documentElement.clientHeight;
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer);
    this.timer = null;
    this.fetchingFlag = false;

    next();
  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
    this.fetchingFlag = false;
  },
  methods: {
    init() {
      this.showMenu = false;
      this.showLampMenu = false;
      this.getLampData();
    },
    setStyle() {
      let dom = document.querySelector('.lamp-content');
      if (!dom) return;
      let w = this.lampData.length * 350 + 300;
      let boxW = dom.clientWidth - 100;
      let _width = w < boxW ? boxW : w;

      return {
        width: _width + 'px',
      }
    },
    async getLampData() {
      this.fetchingFlag = true;

      // this.lampData = [];
      // this.lampName = [];
      this.mappingList = {};
      // this.onSiteList = {};

      let resLamp = await TowerZongLan();
      let resLampBridge = await BrigeZongLan()
      let lighthouse = [], lampBridge = [];
      if (resLamp.data.code == 200) {
        lighthouse = JSON.parse(JSON.stringify(resLamp.data.data)).filter(opt => opt.towerArea == this.currentMenu);
      }else{
        this.$message.warning('无法请求服务器资源，请确认服务器是否开启')
      }
      if (resLampBridge.data.code == 200) {
        lampBridge = JSON.parse(JSON.stringify(resLampBridge.data.data)).filter(opt => opt.brigeArea == this.currentMenu);
      }

      this.lampData = [...lighthouse,...lampBridge];
      this.lampData.sort((a,b) => a.locationUi - b.locationUi)
      /*if (this.lampData.length >= 3) {
        this.lampData.splice(3, 0, ...lampBridge)
      } else {
        this.lampData.push(...lampBridge)
      }*/
      let lampNameArr = [];
      this.onSiteList = {};
      let site = [];
      this.lampData.forEach(opt => {
        let name = opt.towername || opt.brigename;
        let is = Array.isArray(opt.gatewaylist);
        let _gatewaylist = [];
        if(is){
          _gatewaylist = opt.gatewaylist
        }else {
          _gatewaylist = [opt.gatewaylist]
        }
        lampNameArr.push({
          name,
          status: opt.manual,
          gatewaylist: _gatewaylist,
          switchList: opt.switchList
        })

        opt['scene'] = opt.switchList.filter(o => o.type == 1);
        opt['scene'].sort((a, b) => {
          if (a.gatewayId === b.gatewayId) {
            return a.location - b.location;
          }
          return a.gatewayId - b.gatewayId;
        });

        if (is) {
          site.push(...opt.gatewaylist)
        } else {
          site.push(opt.gatewaylist)
        }

        this.mappingList[name] = [];
        let tmp = opt.lightList.filter(o => o.lightType == 5);
        this.mappingList[name] = tmp;
      })
      this.lampName = lampNameArr;
      this.onSiteList[this.currentMenu] = site

      /*let resOnLine = await judgeLightOnline();
      if (resOnLine.data.code == 200) {
        let onLine = resOnLine.data.data;
        lampNameArr.forEach(item => {
          let is = Array.isArray(item.gatewaylist);
          if (is) {
            item.gatewaylist.forEach(opt => {
              opt['onlineStatus'] = onLine[opt.gatewayId];
            })
          } else {
            item.gatewaylist['onlineStatus'] = onLine[item.gatewaylist.gatewayId];
          }
        })

        this.lampName = lampNameArr;
      } else {
        // this.$message.warning(resOnLine.data.msg)
      }*/

      this.$store.commit('SET_ONSITELIST', this.onSiteList);
      this.$store.commit('SET_REFRESHFLAG', false)

      this.setStyle();
    },
    switchHandle(event,opt) {
      //有一个是现场那么就不能再操作灯塔或灯桥了 status = 0
      // this.flagScene = item.scene.some(o => o.status == 0)
      // if(item.manual == 0) { this.flagScene = true }

      this.currLamp = opt;
      let scrollTop = document.querySelector('.lamp-content').scrollTop;
      let scrollLeft = document.querySelector('.lamp-content').scrollLeft;
      let w = this.bodyWidth - 510;
      this.showMenu = true;
      const {clientX, clientY} = event;
      if (clientX < w) {
        this.clientX = clientX + scrollLeft - 135 + "px";
      } else {
        this.clientX = clientX + scrollLeft - 340 + "px";
      }

      let h = this.bodyHeight - (clientY + scrollTop);
      if (h < 180) {
        this.clientY = clientY + scrollTop - 180 + "px";
      } else {
        this.clientY = clientY + scrollTop - 100 + "px";
      }
    },
    lampMenuXY(event){
      let scrollTop = document.querySelector('.lamp-content').scrollTop;
      let scrollLeft = document.querySelector('.lamp-content').scrollLeft;
      let w = this.bodyWidth - 510;
      const {clientX, clientY} = event;
      if (clientX < w) {
        this.clientMenuX = clientX + scrollLeft - 135 + "px";
      } else {
        this.clientMenuX = clientX + scrollLeft - 610 + "px";
      }

      let h = this.bodyHeight - (clientY + scrollTop);
      if (h < 180) {
        this.clientMenuY = clientY + scrollTop - 180 + "px";
      } else {
        this.clientMenuY = clientY + scrollTop - 100 + "px";
      }
    },
    menuLampHandle(event, opt, item) {
      //有一个是现场那么就不能再操作灯塔或灯桥了 status = 0
      this.flagScene = item.scene.some(o => o.status == 0);
      if (this.flagScene) return;
      //手动才可以编辑，自动不可编辑 manual：0（自动）1（手动）
      if (item.manual == 0) return;
      //游客不可操作灯具
      if(this.userInfo.role == 0 || this.userInfo.role == 3) return;

      let name = item.towername || item.brigename;
      this.mappingData = this.mappingList[name]
      this.currMenuLamp = opt;
      this.currMenuLampItem = item;
      //灯具控制员、维护人员 操作灯具
      this.lampMenuXY(event,opt);
      let tmp = [];
      tmp = this.mappingData.filter(v => v.gatewayId == opt.gatewayId);
      this.mappingDataBridge = tmp;

      this.showLampMenu = true;
    },
    menuHandle(opt, item, str) {
      //手动才可以编辑，自动不可编辑 manual：0（自动）1（手动）
      //有一个是现场那么就不能再操作灯塔或灯桥了 status = 0
      this.flagScene = item.scene.some(o => o.status == 0);
      if (this.flagScene) return;
      if (item.manual == 0) {
        this.flagScene = true
      }
      //游客
      if (this.userInfo.role == 3) return;

      if(this.userInfo.role == 0){
        //管理员-更换网关
        if(!Array.isArray(item.gatewaylist)){
          this.currGatewaylist = [item.gatewaylist];
        }else{
          this.currGatewaylist = item.gatewaylist;
        }
        this.$refs.editGateway.show()
      }else{
        this.$refs.editLamp && this.$refs.editLamp.show(opt, item, str);
      }
    },
    submitForm(){
      let {item, type, str,} = this.switchLight;
      //type 0: 自动   1：手动
      if (str == 'house') {
        let {towerId, towerArea, towerNumber} = item;
        updateTowerManual({
          towerId,
          newManual: type,
          towerArea,
          towerNumber
        }).then(res => {
          this.lighthSuccHandle(res)
        })
      } else {
        let {brigeId, brigeArea, brigeNumber} = item;
        updateBrigeManual({
          brigeId,
          newManual: type,
          brigeArea,
          brigeNumber,
        }).then(res => {
          this.lighthSuccHandle(res)
        })
      }
    },
    lighthouseHandle(item, type, str) {
      if (this.userInfo.role == 3) return;

      this.switchLight = {
        item,
        type,
        str,
        diaVisible: true
      }
    },
    lighthSuccHandle(res) {
      this.switchLight.diaVisible = false;
      if (res.data.code == 200) {
        // this.$message.success(res.data.msg);
        this.init();
      } else {
        // this.$message.warning(res.data.msg);
      }
    },
    addLampHandle(item, str) {
      //有一个是现场那么就不能再操作灯塔或灯桥了 status = 0
      let is = item.scene.some(o => o.status == 0);
      if (is) return;

      if (this.userInfo.role == 3) return;

      let name = item.towername || item.brigename;
      this.mappingData = this.mappingList[name];
      if (this.mappingData.length) {
        this.$refs.addLamp.show(item, str, this.mappingData)
      }
    },
    addHouseHandle() {
      if (this.userInfo.role == 3) return;

      this.$refs.addHouse.show();
    },
    delHandle(item) {
      this.$refs.delLamp.show(item);
    },
    delLampHandle(item){
      let lightList = item.lightList.filter(opt => opt.lightType != 3 && opt.lightType != 5);
      this.currentLightList = lightList;
      this.$refs.delLight.show();
    },
    onsiteHandle(item,type){
      this.onsite = {
        standardElectric: 0,
        diaVisible: true
      }
      this.currOnsite = item;
    },
    async submitFormOnsite(){
      let res =  await setStandardElectric({
        buildingName: this.currOnsite.towername || this.currOnsite.brigename,
        standardElectric: this.onsite.standardElectric
      })
      if(res.data.code == 200){
        this.onsite = {
          standardElectric: 0,
          diaVisible: false
        };
        this.currOnsite = {};
        this.init();
      }
    }
  }
}
</script>

<style scoped lang="scss">
.add-btn {
  position: absolute;
  right: 0;
}

.add-btn:before {
  content: "\e609";
}

.box-switch {
  position: fixed;
  top: 92px;
  left: 96px;
  display: flex;
  font-size: 16px;
  font-weight: 400;
  color: #336666;

  img {
    width: 21px;
    margin-right: 5px;

    &:last-child {
      margin-left: 25px;
    }
  }
}

.lamp-wrap {
  //width: calc(100% + 180px);
  //width: fit-content;
  display: flex;
  align-items: center;
  margin-left: 100px;
  margin-top: 50px;
  position: relative;
  z-index: 8;

  > div:nth-child(1){
    margin-left: 100px;
  }

  .house, .bridge {
    float: left;

    .lamp {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      //border: 1px solid #D8E7F7;
      //background-color: #E2F3FB;
      background: url("@/assets/images/lamp-bg-def.svg") no-repeat left top;
      background-size: 100% 100%;
      color: #336666;
      font-size: 12px;
      font-weight: 400;
      text-align: center;
      position: absolute;
      z-index: 2;
      user-select: none;

      &:hover {
        background: url("@/assets/images/lamp-bg-on.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      /*&:before {
        content: '';
        width: 48px;
        position: absolute;
        left: 1px;
        top: 34px;
        border-top: 1px solid #8ED7FE;
      }*/

      img {
        width: 20px;
        height: 20px;
        margin-top: 6px;
      }

      .txt {
        margin-top: 2px;
      }
    }
  }

  .house {
    width: 351px;
    height: 351px;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;

    .lamp {
      &.house-lamp1, &.house-lamp2, &.house-lamp3{
        top: 0;
      }

      &.house-lamp7, &.house-lamp8, &.house-lamp9 {
        top: 200px;
      }

      &.house-lamp1, &.house-lamp9, &.house-lamp13, &.house-lamp21 {
        left: 45px;
      }
      &.house-lamp2, &.house-lamp8, &.house-lamp14, &.house-lamp20 {
        left: 100px;
      }
      &.house-lamp3, &.house-lamp7, &.house-lamp15, &.house-lamp19 {
        left: 155px;
      }
      &.house-lamp10, &.house-lamp11, &.house-lamp12 {
        left: 0;
      }
      &.house-lamp4, &.house-lamp5, &.house-lamp6 {
        left: 200px;
      }
      &.house-lamp4, &.house-lamp12, &.house-lamp16, &.house-lamp24 {
        top: 45px;
      }
      &.house-lamp5, &.house-lamp11, &.house-lamp17, &.house-lamp23 {
        top: 100px;
      }
      &.house-lamp6, &.house-lamp10, &.house-lamp18, &.house-lamp22 {
        top: 155px;
      }
      &.house-lamp13, &.house-lamp14, &.house-lamp15 {
        top: -50px;
      }
      &.house-lamp19, &.house-lamp20, &.house-lamp21 {
        top: 250px;
      }
      &.house-lamp22, &.house-lamp23, &.house-lamp24 {
        left: -50px;
      }
      &.house-lamp16, &.house-lamp17, &.house-lamp18 {
        left: 250px;
      }
    }

    .lamp-area {
      width: 140px;
      height: 140px;
      background-color: #E7F3F9;
      position: absolute;
      left: 55px;
      top: 55px;
      border-radius: 8px;
      text-align: center;

      .handle-btn {
        display: flex;
        justify-content: center;
        margin-top: 34px;
        margin-bottom: 10px;

        div {
          width: 30%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border: 1px solid #3CBDFF;
          font-size: 16px;
          font-weight: 400;
          color: #4D7D80;
          cursor: pointer;
          user-select: none;

          &:hover, &.on {
            color: #fff;
            background-color: #3CBDFF;
          }

          &:nth-child(1) {
            &:hover {
              color: #4D7D80;
              background-color: initial;
            }
          }
        }
      }

      img {
        cursor: pointer;
      }
    }
  }

  .bridge {
    width: 317px;
    margin-left: 18px;
    margin-right: 30px;
    position: relative;
    flex-shrink: 0;

    .lamp-area {
      width: 106px;
      background-color: #E7F3F9;
      position: absolute;
      left: 55px;
      top: 10px;
      border-radius: 8px;

      .handle-btn {
        width: 45px;
        margin: 20px auto 6px;

        div {
          width: 100%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border: 1px solid #3CBDFF;
          font-size: 16px;
          font-weight: 400;
          color: #4D7D80;
          cursor: pointer;
          user-select: none;

          &:hover, &.on {
            color: #fff;
            background-color: #3CBDFF;
          }

          &:nth-child(1) {
            &:hover {
              color: #4D7D80;
              background-color: initial;
            }
          }
        }
      }

      img {
        display: block;
        margin: 0 auto;
        cursor: pointer;
      }
    }

    .add-icon, .edit-icon, .del-light, .electric-icon {
      display: block;
      margin: 8px auto 0px;
    }
  }

  .lamp-empty {
    display: none;
  }

  .add-icon {
    width: 20px;
    height: 20px;
    background: url("@/assets/images/img-icon38.svg") no-repeat left top;
    background-size: 100% 100%;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;

    &:hover {
      background: url("@/assets/images/img-icon39.svg") no-repeat left top;
    }
  }

  .edit-icon {
    width: 20px;
    height: 20px;
    background: url("@/assets/images/img-icon31.svg") no-repeat left top;
    background-size: 100% 100%;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;

    &:hover {
      background: url("@/assets/images/img-icon37.svg") no-repeat left top;
    }
  }

  .del-light{
    width: 20px;
    height: 20px;
    background: url("@/assets/images/img-icon44.svg") no-repeat left top;
    background-size: 100% 100%;
    display: inline-block;
    cursor: pointer;

    &:hover {
      background: url("@/assets/images/img-icon45.svg") no-repeat left top;
    }
  }

  .del-house{
    width: 20px;
    height: 20px;
    background: url("@/assets/images/img-icon46.svg") no-repeat left top;
    background-size: 100% 100%;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;

    &:hover {
      background: url("@/assets/images/img-icon47.svg") no-repeat left top;
    }
  }

  .electric-icon{
    width: 20px;
    height: 20px;
    background: url("@/assets/images/img-icon48.svg") no-repeat left top;
    background-size: 100% 100%;
    display: inline-block;
    cursor: pointer;

    &:hover {
      background: url("@/assets/images/img-icon49.svg") no-repeat left top;
    }
  }

}
.bridge-one{
  height: 740px;

  .lamp{
    &.bridge-lamp1,
    &.bridge-lamp2,
    &.bridge-lamp3,
    &.bridge-lamp4,
    &.bridge-lamp5,
    &.bridge-lamp6,
    &.bridge-lamp7,
    &.bridge-lamp8,
    &.bridge-lamp9,
    &.bridge-lamp10,
    &.bridge-lamp11,
    &.bridge-lamp12{
      left: 0
    }
    &.bridge-lamp25,
    &.bridge-lamp26,
    &.bridge-lamp27,
    &.bridge-lamp28,
    &.bridge-lamp29,
    &.bridge-lamp30,
    &.bridge-lamp31,
    &.bridge-lamp32,
    &.bridge-lamp33,
    &.bridge-lamp34,
    &.bridge-lamp35,
    &.bridge-lamp36{
      left: -50px
    }
    &.bridge-lamp13,
    &.bridge-lamp14,
    &.bridge-lamp15,
    &.bridge-lamp16,
    &.bridge-lamp17,
    &.bridge-lamp18,
    &.bridge-lamp19,
    &.bridge-lamp20,
    &.bridge-lamp21,
    &.bridge-lamp22,
    &.bridge-lamp23,
    &.bridge-lamp24{
      left: 165px
    }
    &.bridge-lamp37,
    &.bridge-lamp38,
    &.bridge-lamp39,
    &.bridge-lamp40,
    &.bridge-lamp41,
    &.bridge-lamp42,
    &.bridge-lamp43,
    &.bridge-lamp44,
    &.bridge-lamp45,
    &.bridge-lamp46,
    &.bridge-lamp47,
    &.bridge-lamp48{
      left: 215px
    }
    &.bridge-lamp1, &.bridge-lamp13, &.bridge-lamp25, &.bridge-lamp37{
      top: 0;
    }
    &.bridge-lamp2, &.bridge-lamp14, &.bridge-lamp26, &.bridge-lamp38{
      top: 55px;
    }
    &.bridge-lamp3, &.bridge-lamp15, &.bridge-lamp27, &.bridge-lamp39{
      top: 110px;
    }
    &.bridge-lamp4, &.bridge-lamp16, &.bridge-lamp28, &.bridge-lamp40{
      top: 165px;
    }
    &.bridge-lamp5, &.bridge-lamp17, &.bridge-lamp29, &.bridge-lamp41{
      top: 220px;
    }
    &.bridge-lamp6, &.bridge-lamp18, &.bridge-lamp30, &.bridge-lamp42{
      top: 275px;
    }
    &.bridge-lamp7, &.bridge-lamp19, &.bridge-lamp31, &.bridge-lamp43{
      top: 330px;
    }
    &.bridge-lamp8, &.bridge-lamp20, &.bridge-lamp32, &.bridge-lamp44{
      top: 385px;
    }
    &.bridge-lamp9, &.bridge-lamp21, &.bridge-lamp33, &.bridge-lamp45{
      top: 440px;
    }
    &.bridge-lamp10, &.bridge-lamp22, &.bridge-lamp34, &.bridge-lamp46{
      top: 495px;
    }
    &.bridge-lamp11, &.bridge-lamp23, &.bridge-lamp35, &.bridge-lamp47{
      top: 550px;
    }
    &.bridge-lamp12, &.bridge-lamp24, &.bridge-lamp36, &.bridge-lamp48{
      top: 605px;
    }
  }
  .lamp-area{
    height: 630px;
  }
}

.bridge-two{
  height: 900px;

  .lamp{
    &.bridge-lamp1,
    &.bridge-lamp2,
    &.bridge-lamp3,
    &.bridge-lamp4,
    &.bridge-lamp5,
    &.bridge-lamp6,
    &.bridge-lamp7,
    &.bridge-lamp8,
    &.bridge-lamp9,
    &.bridge-lamp10,
    &.bridge-lamp11,
    &.bridge-lamp12,
    &.bridge-lamp13,
    &.bridge-lamp14,
    &.bridge-lamp15{
      left: 0;
    }
    &.bridge-lamp31,
    &.bridge-lamp32,
    &.bridge-lamp33,
    &.bridge-lamp34,
    &.bridge-lamp35,
    &.bridge-lamp36,
    &.bridge-lamp37,
    &.bridge-lamp38,
    &.bridge-lamp39,
    &.bridge-lamp40,
    &.bridge-lamp41,
    &.bridge-lamp42,
    &.bridge-lamp43,
    &.bridge-lamp44,
    &.bridge-lamp45{
      left: -50px;
    }
    &.bridge-lamp16,
    &.bridge-lamp17,
    &.bridge-lamp18,
    &.bridge-lamp19,
    &.bridge-lamp20,
    &.bridge-lamp21,
    &.bridge-lamp22,
    &.bridge-lamp23,
    &.bridge-lamp24,
    &.bridge-lamp25,
    &.bridge-lamp26,
    &.bridge-lamp27,
    &.bridge-lamp28,
    &.bridge-lamp29,
    &.bridge-lamp30{
      left: 165px;
    }
    &.bridge-lamp46,
    &.bridge-lamp47,
    &.bridge-lamp48,
    &.bridge-lamp49,
    &.bridge-lamp50,
    &.bridge-lamp51,
    &.bridge-lamp52,
    &.bridge-lamp53,
    &.bridge-lamp54,
    &.bridge-lamp55,
    &.bridge-lamp56,
    &.bridge-lamp57,
    &.bridge-lamp58,
    &.bridge-lamp59,
    &.bridge-lamp60{
      left: 215px;
    }
    &.bridge-lamp1, &.bridge-lamp16, &.bridge-lamp31, &.bridge-lamp46{
      top: 0;
    }
    &.bridge-lamp2, &.bridge-lamp17, &.bridge-lamp32, &.bridge-lamp47{
      top: 55px;
    }
    &.bridge-lamp3, &.bridge-lamp18, &.bridge-lamp33, &.bridge-lamp48{
      top: 110px;
    }
    &.bridge-lamp4, &.bridge-lamp19, &.bridge-lamp34, &.bridge-lamp49{
      top: 165px;
    }
    &.bridge-lamp5, &.bridge-lamp20, &.bridge-lamp35, &.bridge-lamp50{
      top: 220px;
    }
    &.bridge-lamp6, &.bridge-lamp21, &.bridge-lamp36, &.bridge-lamp51{
      top: 275px;
    }
    &.bridge-lamp7, &.bridge-lamp22, &.bridge-lamp37, &.bridge-lamp52{
      top: 330px;
    }
    &.bridge-lamp8, &.bridge-lamp23, &.bridge-lamp38, &.bridge-lamp53{
      top: 385px;
    }
    &.bridge-lamp9, &.bridge-lamp24, &.bridge-lamp39, &.bridge-lamp54{
      top: 440px;
    }
    &.bridge-lamp10, &.bridge-lamp25, &.bridge-lamp40, &.bridge-lamp55{
      top: 495px;
    }
    &.bridge-lamp11, &.bridge-lamp26, &.bridge-lamp41, &.bridge-lamp56{
      top: 550px;
    }
    &.bridge-lamp12, &.bridge-lamp27, &.bridge-lamp42, &.bridge-lamp57{
      top: 605px;
    }
    &.bridge-lamp13, &.bridge-lamp28, &.bridge-lamp43, &.bridge-lamp58{
      top: 660px;
    }
    &.bridge-lamp14, &.bridge-lamp29, &.bridge-lamp44, &.bridge-lamp59{
      top: 715px;
    }
    &.bridge-lamp15, &.bridge-lamp30, &.bridge-lamp45, &.bridge-lamp60{
      top: 770px;
    }
  }
  .lamp-area{
    height: 795px;
  }
}

.house-all {
  align-items: normal;
}

.lamp-btns {
  width: calc(100% - 100px);
  padding-left: 100px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  background: url("@/assets/images/img-center-border.png") no-repeat left top;
  background-size: 100% 100%;

  .item {
    width: 250px;
    margin-right: 12px;
    padding-right: 100px;
    text-align: center;
    position: relative;

    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      div {
        border: 1px solid #E8EEFA;
      }

      .txt {
        //width: 20px;
        height: 30px;
        line-height: 30px;
      }

      .img {
        width: 30px;
        height: 26px;
        text-align: center;
        padding-top: 4px;
      }
    }

    .net {
      margin-bottom: 10px;
    }

    .lamp-name {
      font-size: 18px;
      font-weight: 400;
      color: #336666;
      margin-right: 10px;
    }

    .status {
      width: 60px;
      height: 30px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #eb1924;
      background-color: #eb1924;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      display: inline-block;
    }

    .online {
      background-color: #57D695;
      border-color: #39CF7C;
    }
  }

  .lamp-bridge {
    width: 217px;
    margin-left: 18px;
    margin-right: 30px;
  }
}

.lamp-menu {
  //width: 200px;
  //height: 85px;
  line-height: 85px;
  text-align: center;
  background-color: #8E9DB0;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  position: absolute;
  z-index: 8;
  padding: 0 20px;

  span {
    font-weight: 700;
  }
}

.lamp-area-name {
  width: 104px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #366;
  position: fixed;
  left: 220px;
  bottom: 100px;
  z-index: 9;
  background: url("@/assets/images/img-area-bg.svg") no-repeat left top;
  background-size: 100% 100%;
}
</style>
